<!--
产品管理—基础信息页
凌辉
2017-7-10
-->
<template>
  <el-row>
    <el-col style="border-bottom: 1px solid #bfcbd9;padding: 20px 0px;">
      <el-col style="width: 32%;border: 1px solid #bfcbd9;height: 270px;"></el-col>
      <el-col style="width: 50%;margin-left: 20px;">
        <el-form label-width="160px" :model="productTour" :rules="productFormRules" ref="productTour">
          <el-form-item label="来单产品名称主标题" prop="productMainTitle" id="formheight">
            <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="productTour.productMainTitle" id="color_c"></el-input>
          </el-form-item>
          <el-form-item label="来单产品名副主标题" prop="productSubTitle" id="formheight">
            <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="productTour.productSubTitle" id="color_c"></el-input>
          </el-form-item>
          <el-form-item label="供应商产品名称" prop="supplyProductName" id="formheight">
            <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="productTour.supplyProductName" id="color_c"></el-input>
          </el-form-item>
          <el-form-item label="出发地" prop="dpt" id="formheight">
            <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="productTour.dpt" id="color_c"></el-input>
          </el-form-item>
          <el-form-item label="目的地" prop="arr" id="formheight">
            <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="productTour.arr" id="color_c"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-col>
    <el-col style="padding: 20px 0px;border-bottom: 1px solid #bfcbd9;">
      <el-col :span="8"><span style="color: red"> * </span><span>产品类型：</span>
        <el-select :disabled="pageType === 'look'||pageType === 'audits'" v-model="productTour.productType" @change="productTypeChange" id="color_c">
          <el-option label="请选择" value=""></el-option>
          <el-option label="跟团游" value="group"></el-option>
          <el-option label="自由行" value="free"></el-option>
          <el-option label="主题游" value="themt"></el-option>
        </el-select>
        <span style="color: red" v-if="productTypeNotNull"> 请选择产品类型</span>
      </el-col>
      <el-col :span="8" v-if="productTour.productType === 'group'"><span style="color: red"> * </span><span>参团类型：</span>
        <el-select :disabled="pageType === 'look'||pageType === 'audits'" v-model="productTour.gType" @change="gTypeChange" id="color_c">
          <el-option label="请选择" value=""></el-option>
          <el-option label="出发地参团" value="dpt"></el-option>
          <el-option label="目的地参团" value="arr"></el-option>
        </el-select>
        <span style="color: red" v-if="gTypeNotNull"> 请选择参团类型</span>
      </el-col>
      <el-col :span="8"><span style="color: red"> * </span><span>线路类型：</span>
        <el-select :disabled="pageType === 'look'||pageType === 'audits'" v-model="productTour.lineType" @change="lineTypeChange" id="color_c">
          <el-option label="请选择" value=""></el-option>
          <el-option label="国内-短线" value="short"></el-option>
          <el-option label="国内-长线" value="long"></el-option>
          <el-option label="出境/港澳台" value="foreign"></el-option>
        </el-select>
        <span style="color: red" v-if="lineTypeNotNull"> 请选择线路类型</span>
      </el-col>
    </el-col>
    <el-col style="padding: 20px 0px;">
      <el-col style="width: 50%">
        <span style="margin-left: 20px;">提前预定天数：</span>
        <el-input :disabled="pageType === 'look'||pageType === 'audits'" type="number" :min="0" @blur="advanceDaysBlur" style="width: 60px" size="small"
                  v-model="inpNum" id="color_c"></el-input>
        <span style="color: red;width: 108px;" v-if="advanceDaysNotNull"> 请输入提前预定天数</span>
      </el-col>
    </el-col>
    <el-col>
      <el-col style="width: 8%">
        <span style="margin-left: 20px;">产品特色：</span>
      </el-col>
      <el-col style="width: 90%">
        <el-checkbox-group v-model="productFeaturesArr" id="color_c">
          <el-checkbox :disabled="pageType === 'look'||pageType === 'audits'" v-for="feature in features" :label="feature.featuresName"
                       :key="feature.featuresName"></el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-col>
    <el-col>
      <el-button type="primary" :disabled="pageType === 'look'||pageType === 'audits'" @click="handleSubmit" style="margin-top: 20px;" :loading="saveNextLoading">保存并下一步</el-button>
    </el-col>
  </el-row>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      productIdConfig: {
        type: Number
      },
      pageType: {
        type: String
      }
    },
    data () {
      return {
        saveNextLoading: false,
        productTour: {
          id: '',
          productCode: '',
          productType: '',
          gType: '',
          lineType: '',
          productState: false,
          auditState: '',
          productMainTitle: '',
          productSubTitle: '',
          supplyProductName: '',
          productMainPic: '',
          productPic: '',
          dpt: '',
          arr: '',
          productFeatures: '',
          tripDay: '',
          tripNight: '',
          advanceDays: ''
        },
        productFeaturesArr: [],
        productTypeNotNull: false,
        lineTypeNotNull: false,
        gTypeNotNull: false,
        daysNotNull: false,
        advanceDaysNotNull: false,
        loginType: '',
        companyId: '',
        loginType1: {
          'type': ''
        },
        features: [{'label': '纯玩', 'value': 'play'}, {'label': '无购物', 'value': 'shopping'}, {
          'label': '无自费',
          'value': 'noMoney'
        }, {'label': '免税店折扣', 'value': 'discount'}, {'label': '曾交通卡', 'value': 'traffic'}],
        productFormRules: { // 用户信息校验
          productMainTitle: [
            {required: true, message: '请输入来单产品名称主标题', trigger: 'blur'}
          ],
          productSubTitle: [
            {required: true, message: '请输入来单产品名称副标题', trigger: 'blur'}
          ],
          supplyProductName: [
            {required: true, message: '请输入供应商产品名称', trigger: 'blur'}
          ],
          dpt: [
            {required: true, message: '请输入出发地', trigger: 'blur'}
          ],
          arr: [
            {required: true, message: '请输入目的地', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      inpNum: {
        get: function () {
          return this.productTour.advanceDays
        },
        set: function (newValue) {
          this.productTour.advanceDays = newValue.replace(/[^\d]/g, '')
        }
      },
      inpNum2: {
        get: function () {
          return this.productTour.tripDay
        },
        set: function (newValue) {
          this.productTour.tripDay = newValue.replace(/[^\d]/g, '')
        }
      },
      inpNum3: {
        get: function () {
          return this.productTour.tripNight
        },
        set: function (newValue) {
          this.productTour.tripNight = newValue.replace(/[^\d]/g, '')
        }
      }
    },
    methods: {
      productTypeChange () {
        if (this.productTour.productType === '') {
          this.productTypeNotNull = true
          return false
        } else {
          this.productTypeNotNull = false
          return true
        }
      },
      gTypeChange () {
        if (this.productTour.gType === '' && this.productTour.productType === 'group') {
          this.gTypeNotNull = true
          return false
        } else {
          this.gTypeNotNull = false
          return true
        }
      },
      lineTypeChange () {
        if (this.productTour.lineType === '') {
          this.lineTypeNotNull = true
          return false
        } else {
          this.lineTypeNotNull = false
          return true
        }
      },
      advanceDaysBlur () {
        if (this.productTour.advanceDays === '') {
          this.advanceDaysNotNull = true
          return false
        } else {
          this.advanceDaysNotNull = false
          return true
        }
      },
      handleSubmit () {
        this.$refs.productTour.validate((valid) => {
          var bol1 = this.productTypeChange()
          var bol2 = this.gTypeChange()
          var bol3 = this.lineTypeChange()
          var bol4 = this.advanceDaysBlur()
          if (valid && bol1 && bol2 && bol3 && bol4) {
            this.productTour.id = this.productIdConfig
            this.productTour.productFeatures = this.productFeaturesArr.toString()
            var url = '/smartLight/web/productTour/save.htm'
            var para = {
              productTour: this.productTour,
              type: this.loginType
            }
            this.saveNextLoading = true
            this.$http.post(url, para).then(response => {
              this.saveNextLoading = false
              var resBody = response.body
              if (resBody.isSuccess === 0) {
                this.$emit('saveNext', '1', resBody.result)
              } else if (resBody.isSuccess === 2) {
                this.listLoading = false
                this.$alert(resBody.errorMsg, ' ', {
                  type: 'warning'
                }).then(() => {
                  this.$router.push({path: '/login'})
                  sessionStorage.clear()
                })
              } else {
                this.$message({
                  showClose: true,
                  message: resBody.errorMsg,
                  type: 'error'
                })
              }
            })
          }
        })
      }
    },
    mounted () {
      var user = sessionStorage.getItem('user')
      if (user) {
        user = JSON.parse(user)
        this.loginType = user.type
        this.companyId = user.companyId
        this.loginType1.type = user.type
      }
      this.$http.post('/smartLight/web/productFeatures/getFeatursAll.htm').then(response => {
        var resBody = response.body
        if (resBody.isSuccess === 0) {
          this.features = resBody.result
        }
      })
      var para = {
        id: this.productIdConfig,
        type: this.loginType
      }
      this.$http.post('/smartLight/web/productTour/getById.htm', para).then(response => {
        var resBody = response.body
        if (resBody.isSuccess === 0) {
          this.productTour = resBody.result
          this.productFeaturesArr = this.productTour.productFeatures.split(',')
        }
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  #inputheight
    .el-input__inner
      height: 30px

  .radio
    width: 100px
    margin-left: 0px !important
    text-overflow: ellipsis
    white-space: nowrap
    overflow: hidden

  .input-new-tag
    width: 100px !import

  .classShow
    height: auto
    overflow: visible

  .classHidden
    height: 36px
    overflow: hidden

</style>
<style lang="stylus" rel="stylesheet/stylus">
#color_c .el-input__inner {
    color:#898989;
  }
#color_c .el-checkbox__label{color:#898989;}
</style>
